<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <title>开启头部工具栏 - 数据表格</title>
  <meta name="renderer" content="webkit">
  <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
  <meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=0">
  <link rel="stylesheet" href="${pageContext.request.contextPath }/back/layui/css/layui.css" media="all">
  <link rel="stylesheet" href="${pageContext.request.contextPath }/back/style/admin.css" media="all">
</head>
<body>

  <div class="layui-card layadmin-header">
    <div class="layui-breadcrumb" lay-filter="breadcrumb">
      <a lay-href="">主页</a>
      <a><cite>组件</cite></a>
      <a><cite>数据表格</cite></a>
      <a><cite>开启头部工具栏</cite></a>
    </div>
  </div>
  
  <div class="layui-fluid">
    <div class="layui-row layui-col-space15">
      <div class="layui-col-md12">
        <div class="layui-card">
          <div class="layui-card-header">房间信息</div>
          <div class="layui-card-body">
          	<div class="layui-form layui-card-header layuiadmin-card-header-auto">
        <div class="layui-form-item">
          <div class="layui-inline">
            <label class="layui-form-label">房间号</label>
            <div class="layui-input-block">
              <input type="text" name="loginname" placeholder="请输入" autocomplete="off" class="layui-input" id="roomNum">
            </div>
          </div>

            <div class="layui-inline">
                <label class="layui-form-label">房间类型</label>
                <div class="layui-input-block">
                    <select name="role" class="rtName" id="rtName">
                        <option value="">所有</option>
                    </select>
                </div>
            </div>

          <div class="layui-inline">
            <label class="layui-form-label">审核状态</label>
            <div class="layui-input-block">
              <select name="role" id="roomStatus">
                  <option value="88">所有</option>
                <option value="0">空闲</option>
                <option value="1">已入住</option>
                <option value="2">已预约</option>
                <option value="3">停用</option>
              </select>
            </div>
           </div>
          <div class="layui-inline">
            <button class="layui-btn layuiadmin-btn-admin" lay-submit lay-filter="LAY-user-back-search" id="fuzzyQuery">
              <i class="layui-icon layui-icon-search layuiadmin-button-btn"></i>
            </button>
          </div>
          <div class="layui-inline">
         			 <button class="layui-btn layuiadmin-btn-admin" data-type="add">添加</button>
          </div>
        </div>
      </div>
      
            <table class="layui-hide" id="test-table-toolbar" lay-filter="test-table-toolbar"></table>
            
            <script type="text/html" id="test-table-toolbar-toolbarDemo">
              <div class="layui-btn-container">
                <button class="layui-btn layui-btn-sm" lay-event="getCheckData">获取选中行数据</button>
                <button class="layui-btn layui-btn-sm" lay-event="getCheckLength">获取选中数目</button>
                <button class="layui-btn layui-btn-sm" lay-event="isAll">验证是否全选</button>
              </div>
            </script>
            
            <script type="text/html" id="buttonTpl">
                {{#  if(d.roomStatus == 0 ||d.roomStatus == "空闲中"){ }}
                <button class="layui-btn layui-btn-normal layui-btn-xs">空闲中</button>
                {{#  } else if(d.roomStatus == 1 ||d.roomStatus == "已入住") { }}
                <button class="layui-btn layui-btn-danger layui-btn-xs">已入住</button>
                {{#  } else if(d.roomStatus == 2 ||d.roomStatus == "已预约") { }}
                <button class="layui-btn layui-btn-warm layui-btn-xs">已预约</button>
                {{#  } else if(d.roomStatus == 3 ||d.roomStatus == "已停用") { }}
                <button class="layui-btn layui-btn-disabled layui-btn-xs">已停用</button>
                {{#  } }}
            </script>
            <script type="text/html" id="test-table-toolbar-barDemo">
              <a class="layui-btn layui-btn-xs" lay-event="edit">修改</a>
              <a class="layui-btn layui-btn-danger layui-btn-xs" lay-event="del">删除</a>
            </script>
          </div>
        </div>
      </div>
    </div>
  </div>
  
  <script src="${pageContext.request.contextPath }/back/layui/layui.js"></script>
  <script src="http://libs.baidu.com/jquery/2.0.0/jquery.min.js"></script>
  <script src="https://cdn.staticfile.org/twitter-bootstrap/3.3.7/js/bootstrap.min.js"></script>
  <script>
      function renderdatas(roomNum,roomStatus,rtName){
  layui.config({
    base: '${pageContext.request.contextPath }/back/' //静态资源所在路径
  }).extend({
    index: 'lib/index' //主入口模块
  }).use(['index', 'table'], function(){
    var admin = layui.admin
    ,$ = layui.$
    ,form = layui.form
    ,table = layui.table;
  
    table.render({
      elem: '#test-table-toolbar'
      ,url: '${pageContext.request.contextPath }/RoomInfosController/getqueryAllRoomInfo?roomNum='+roomNum+'&roomStatus='+roomStatus+'&rtName='+rtName
      ,toolbar: '#test-table-toolbar-toolbarDemo'
      ,title: '房间信息'
      ,cols: [[
        {type: 'checkbox', fixed: 'left'}
        ,{field:'roomId', title:'ID', width:80, fixed: 'left', unresize: true}
        ,{field:'roomNum', title:'房间号', width:150, sort: true}
        ,{field:'rtName', title:'房间类型名', width:150, edit: 'text',templet: '<div>{{d.roomType.rtName}}</div>'}
        ,{field:'rtPrice', title:'价格', width:150, sort: true,templet: '<div>{{d.roomType.rtPrice}}</div>'}
        ,{field:'rtForegift', title:'押金', width:150, sort: true,templet: '<div>{{d.roomType.rtForegift}}</div>'}
        ,{field:'roomTel', title:'房间电话', edit: 'text',width:200}
        ,{field: 'roomStatus', title:'房间状态', templet: '#buttonTpl', width: 120, align: 'center', edit: 'text'}
        ,{fixed: 'right', title:'操作', toolbar: '#test-table-toolbar-barDemo', width:150}
      ]],
      request: {pageName: 'pageNum'  //页码的参数名称，默认：page
          ,limitName: 'pageSize'}    //每页数据量的参数名，默认：limit

      ,method: 'post'
      ,page: true
      ,limit:5   //默认十条数据一页
      ,limits: [3, 5, 8, 10, 15, 20]
    });

    //头工具栏事件
    table.on('toolbar(test-table-toolbar)', function(obj){
      var checkStatus = table.checkStatus(obj.config.id);
      switch(obj.event){
        case 'getCheckData':
          var data = checkStatus.data;
          layer.alert(JSON.stringify(data));
        break;
        case 'getCheckLength':
          var data = checkStatus.data;
          layer.msg('选中了：'+ data.length + ' 个');
        break;
        case 'isAll':
          layer.msg(checkStatus.isAll ? '全选': '未全选');
        break;
      };
    });
    
    //监听行工具事件
    table.on('tool(test-table-toolbar)', function(obj){
      var data = obj.data;
      if(obj.event === 'del'){
        layer.confirm('真的删除行么', function(index){
          //obj.del();
            $.get("${pageContext.request.contextPath }/RoomInfosController/delRoomInfo?roomId=" +data.roomId,
                function(data, status) {
                    layer.msg('删除成功');
                    $(".layui-laypage-btn").click() ;//刷新当前行
                });
          layer.close(index);
        });
      } else if(obj.event === 'edit'){
          var roomStatusd=data.roomStatus;
          if(roomStatusd==0){roomStatusd="空闲中"};
          if(roomStatusd==1){roomStatusd="已入住"};
          if(roomStatusd==2){roomStatusd="已预约"};
          if(roomStatusd==3){roomStatusd="已停用"};
          var roomStatus=data.roomStatus;
          if(roomStatus=="空闲中" ||roomStatus==""){roomStatus="0"};
          if(roomStatus=="已入住"){roomStatus="1"};
          if(roomStatus=="已预约"){roomStatus="2"};
          if(roomStatus=="已停用"){roomStatus="3"};
          layer.confirm('确认修改该房间：'+data.roomNum+' 的电话为：'+data.roomTel+'，房间状态为：'+roomStatusd, function(index) {

              $.ajax({
                  type : "POST",
                  url : "${pageContext.request.contextPath }/RoomInfosController/modifyRoomInfo",
                  data : {
                      roomId:data.roomId,
                      roomTel:data.roomTel,
                      roomStatus:roomStatus
                  },
                  dataType : "json",
                  success : function(data) {
                      layer.msg('修改成功');
                      $(".layui-laypage-btn").click() ;//刷新当前行
                  }
              })
              layer.close(index);
        });

      }
    });
  	//事件
    var active = {
      add: function(){
        layer.open({
          type: 2
          ,title: '添加房间'
          ,content: '${pageContext.request.contextPath }/BackController/roomform'
          ,area: ['420px', '520px']
          ,btn: ['确定', '取消']
          ,yes: function(index, layero){
            var iframeWindow = window['layui-layer-iframe'+ index]
            ,submitID = 'LAY-user-back-submit'
            ,submit = layero.find('iframe').contents().find('#'+ submitID);

            //监听提交
            iframeWindow.layui.form.on('submit('+ submitID +')', function(data){
              var field = data.field; //获取提交的字段
              
              //提交 Ajax 成功后，静态更新表格中的数据
              //$.ajax({});
              table.reload('LAY-user-front-submit'); //数据刷新
              layer.close(index); //关闭弹层
            });  
            
            submit.trigger('click');
          }
        }); 
      } 
    }
    $('.layui-btn.layuiadmin-btn-admin').on('click', function(){
      var type = $(this).data('type');
      active[type] ? active[type].call(this) : '';
    });
  });
      }
 $(function() {
     var roomNum=0;
     var roomStatus=88;
     var rtName="";
     //渲染数据
     renderdatas(roomNum,roomStatus,rtName);
     //模糊查询
     $("#fuzzyQuery").click(function(){
         roomNum=$("#roomNum").val()*1;
         roomStatus=$("#roomStatus").val()*1;
         rtName=$("#rtName").val();

         renderdatas(roomNum,roomStatus,rtName);
     })

     // 对查询房间类型做动态显示
     $.ajax({
         type : "POST",
         url : "${pageContext.request.contextPath }/RoomTypeController/queryRtNameRoomType",
         dataType : "json",
         success : function(data) {
             $.each(data,function(index, obj) {
                 //alert(obj.rtName);
                 $(".rtName").append("<option value=\""+obj.rtName+"\">"+obj.rtName+"</option>");
             })
         }
     })
 })
  </script>
</body>
</html>